<template>
  <div>
    <h3>{{ msg }}</h3>
    <input type="text" v-model="msg">
    <p>---------------</p>
    <my-grandson></my-grandson>
  </div>
</template>

<script>
// 同步方式引入组件
// 生命周期执行顺序：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
import grandson from './grandson'
// 异步方式引入组件
// 生命周期执行顺序：父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted
// const grandson = () => import('@/components/lifecycle/grandson')

export default {
  data() {
    return {
      msg: '我是 儿子 组件'
    }
  },
  components: {
    'my-grandson': grandson
  },
  beforeCreate() {
    console.log('child:', 'beforeCreate')
  },
  created() {
    console.log('child:', 'created')
  },
  beforeMount() {
    console.log('child:', 'beforeMount')
  },
  mounted() {
    console.log('child:', 'mounted')
  },
  beforeUpdate() {
    console.log('child:', 'beforeUpdate')
  },
  updated() {
    console.log('child:', 'updated')
  }
}
</script>
